<
コンテンツ
説明 バグレポート

Visual Studioコード

コンテンツ

インストールとセットアップ

フォローしてくださいエディターをセットアップするへの指示 Dart と Flutter 拡張機能をインストールする (プラグインとも呼ばれます)。

拡張機能の更新

拡張機能のアップデートは定期的に配信されます。 デフォルトでは、VS Code は次の場合に拡張機能を自動的に更新します。 アップデートが利用可能です。

アップデートを手動でインストールするには:

  1. クリック拡張機能サイドバーのボタンをクリックします。
  2. Flutter 拡張機能が利用可能なアップデートとともに表示される場合、 「更新」ボタンをクリックしてから「再読み込み」ボタンをクリックします。
  3. VS コードを再起動します。

プロジェクトの作成

新しいプロジェクトを作成するには、いくつかの方法があります。

新しいプロジェクトの作成

Flutter から新しい Flutter プロジェクトを作成するには スターター アプリ テンプレート:

  1. コマンドパレットを開く (Ctrl+Shift+P(Cmd+Shift+PmacOS の場合))。
  2. を選択 flutter: 新しいプロジェクトコマンドを押して押すEnter。
  3. 選択する応用そして押しますEnter。
  4. を選択プロジェクトの場所。
  5. ご希望を入力してくださいプロジェクト名。

既存のソースコードからプロジェクトを開く

既存の Flutter プロジェクトを開くには:

  1. クリックファイル > 開くメイン IDE ウィンドウから。
  2. 既存のファイルが保存されているディレクトリを参照します。 Flutter ソース コード ファイル。
  3. クリック開ける。

コードの編集と問題の表示

Flutter 拡張機能はコード分析を実行します。 次のことが可能になります。

  • 構文の強調表示
  • リッチタイプ分析に基づくコード補完
  • 型宣言への移動 (定義に移動またF12）、 そして型の使用法を見つける (すべての参考文献を検索またShift+F12)
  • 現在のソース コードの問題をすべて表示する (表示 > 問題またCtrl+Shift+M(Cmd+Shift+MmacOS の場合)) 分析の問題はすべて [問題] ペインに表示されます。
    Problems pane

実行とデバッグ

をクリックしてデバッグを開始します「実行」>「デバッグの開始」メイン IDE ウィンドウから、または を押します。F5。

ターゲットデバイスの選択

Flutter プロジェクトが VS Code で開かれている場合、 ステータス バーに Flutter 固有のエントリのセットが表示されるはずです。 Flutter SDK バージョンと デバイス名 (またはメッセージ)デバイスがありません):
VS Code status bar

Flutter 拡張機能は、最後に接続されたデバイスを自動的に選択します。 ただし、複数のデバイス/シミュレータが接続されている場合は、デバイスステータスバーで選択リストを表示します 画面の上部にあります。使用したいデバイスを選択してください 実行中またはデバッグ中。

ブレークポイントなしでアプリを実行する

  1. クリック「実行」>「デバッグなしで開始」の中に メイン IDE ウィンドウ、または を押します。Ctrl+F5。

ブレークポイントを使用してアプリを実行する

  1. 必要に応じて、ソース コードにブレークポイントを設定します。

  2. クリック「実行」>「デバッグの開始」メイン IDE ウィンドウで、 または を押してくださいF5。ステータス バーがオレンジ色に変わり、デバッグ セッション中であることが示されます。
    Debug console

    • 左デバッグサイドバースタックフレームと変数を示します。
    • ボトムデバッグコンソールペインには詳細なログ出力が表示されます。
    • デバッグはデフォルトの起動構成に基づいて行われます。 カスタマイズするには、上部にある歯車をクリックします。デバッグサイドバーを作成するlaunch.jsonファイル。 その後、値を変更できます。

デバッグ、プロファイル、またはリリース モードでアプリを実行する

Flutter には、アプリを実行するためのさまざまなビルド モードが用意されています。 それらについて詳しくは、Flutterのビルドモード。

  1. を開きます。launch.jsonVS Code 内のファイル。

    お持ちでない場合は、launch.jsonファイル、に移動します の走るVS Code で表示してクリックしますlaunch.json ファイルを作成する。

  2. の中にconfigurationsセクションで、flutterMode財産を ターゲットとするビルド モード。
    • たとえば、デバッグモードで実行したい場合は、 あなたのlaunch.json次のようになります:
        "configurations": [
{
  "name": "Flutter",
  "request": "launch",
  "type": "dart",
  "flutterMode": "debug"
}
 ]
  3. を通じてアプリを実行します走る意見。

迅速な編集と更新の開発サイクル

Flutter はクラス最高の開発者サイクルを提供し、 変更の効果をほぼ即座に確認するには、ステートフル ホット リロード特徴。 さらに詳しく知りたい場合は、こちらをご覧くださいホットリロード。

高度なデバッグ

次の高度なデバッグのヒントが役立つ場合があります。

視覚的なレイアウトの問題のデバッグ

デバッグセッション中に、 いくつかの追加のデバッグ コマンドがコマンドパレットそして、へ flutterインスペクター。 スペースが限られている場合、アイコンはビジュアルとして使用されます。 ラベルのバージョン。

ベースラインペイントの切り替え Baseline painting icon
各 RenderBox の各ベースラインで線をペイントします。
虹の再描画の切り替え Repaint rainbow icon
再ペイント時にレイヤー上で回転するカラーを表示します。
スローアニメーションの切り替え Slow animations icon
アニメーションを遅くして目視検査できるようにします。
デバッグモードバナーの切り替え Debug mode banner icon
デバッグ ビルドの実行中であっても、デバッグ モードのバナーを非表示にします。

外部ライブラリのデバッグ

デフォルトでは、外部ライブラリのデバッグは無効になっています Flutter 拡張機能で。有効にする：

  1. 選択する設定 > 拡張機能 > Dart 設定。
  2. チェックしてくださいDebug External Librariesオプション。

Flutter コードの編集のヒント

さらに共有すべきヒントがある場合は、我々に教えてください！

アシストとクイックフィックス

アシストは、特定のコード識別子に関連するコード変更です。 これらの多くは、カーソルを上に置くと使用できます。 Flutter ウィジェットの識別子 (黄色の電球アイコンで示されます)。 アシストは、電球をクリックするか、 キーボードショートカットCtrl+.(Cmd+.Mac の場合)、ここに示すように:

Code assists

クイックフィックスも同様ですが、 コードの一部が表示されているだけでエラーが発生し、 それを修正するのに役立ちます。

新しいウィジェットアシストでラップする
ラップしたいウィジェットがある場合に使用できます 周囲のウィジェット内で、たとえば、 のウィジェットRowまたColumn。
新しいウィジェットアシストでウィジェットリストをラップする
上記のアシストと似ていますが、既存のアシストをラップするためのものです。 個々のウィジェットではなく、ウィジェットのリスト。
子どもから子どもへの変換支援
子引数を子引数に変更します。 そして引数の値をリストにラップします。
StatelessWidget から StatefulWidget への変換アシスト
の実装を変更しますStatelessWidgetのそれに あるStatefulWidgetを作成することで、State授業と移動 そこにあるコード。

切れ端

スニペットを使用すると、一般的なコード構造の入力を高速化できます。 これらは、接頭辞を入力することで呼び出されます。 次に、コード補完ウィンドウから次を選択します。Snippets

Flutter 拡張機能には次のスニペットが含まれています。

  • プレフィックスstless: 新しいサブクラスを作成しますStatelessWidget。
  • プレフィックスstful: 新しいサブクラスを作成しますStatefulWidgetおよびそれに関連する State サブクラス。
  • プレフィックスstanim: 新しいサブクラスを作成しますStatefulWidget、 および初期化されたフィールドを含むそれに関連する State サブクラス とAnimationController。

次のコマンドを実行してカスタム スニペットを定義することもできます。ユーザー スニペットの構成からコマンドパレット。

キーボードショートカット

ホットリロード
デバッグ セッション中に、ホットリロードのボタンデバッグツールバー、または押すCtrl+F5(Cmd+F5macOS 上) ホットリロードを実行します。

キーボードのマッピングは、次のコマンドを実行することで変更できます。キーボードショートカットを開くからのコマンドコマンドパレット。

ホットリロードとホットリスタート

ホット リロードは、更新されたソース コード ファイルを Dart VM (仮想マシン) を実行します。これには次のものが含まれます： 新しいクラスを追加するだけでなく、メソッドとフィールドも追加します 既存のクラスと既存の関数の変更。 ただし、いくつかの種類のコード変更はホットリロードできません。

  • グローバル変数初期化子
  • 静的フィールド初期化子
  • のmain()アプリの方法

これらの変更を行うには、アプリケーションを完全に再起動します。 デバッグセッションを終了する必要があります。ホットリスタートを実行するには、 を実行します flutter: ホットリスタートからのコマンドコマンドパレット、 または を押してくださいCtrl+Shift+F5(Cmd+Shift+F5macOS の場合）。

トラブルシューティング

既知の問題とフィードバック

既知のバグはすべて、問題トラッカーで追跡されます。Dart および Flutter 拡張機能 GitHub 問題トラッカー。

フィードバックをお待ちしております。 バグ/問題と機能リクエストの両方について。 新しい問題を提出する前に:

  • 問題トラッカーで簡単に検索して、 問題はすでに追跡されています。
  • あなたがそうであることを確認してください最新の最新の プラグインのバージョン。

新しい問題を提出するときは、次のことを含めてください flutterドクター出力。